<template>
  <div v-loading.lock="loading" class="base-content">
    <div class="basic-info">
      <!--操作栏-->
      <div class="base-content-operate">
        <el-button
          v-rights="'export'"
          icon="el-icon-document-copy"
          type="primary"
          @click="exportData()"
          >{{ btn.Export }}</el-button
        >
      </div>
      <!--列表-->
      <el-table
        ref="table"
        class="filter unsetborder"
        :class="{ 'show-filter': showFilterRow }"
        :data="tableData"
        height="calc(100% - 190px)"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55">
          <el-table-column type="selection"></el-table-column>
        </el-table-column>
        <el-table-column align="center" width="50">
          <template #header>
            <div class="filter-icon" :title="dataList.Screen">
              <SvgIcon
                class-name="filter"
                icon-class="filter"
                @click="filterIconClick"
              />
            </div>
          </template>
          <el-table-column width="50"></el-table-column>
        </el-table-column>

        <el-table-column :label="dataList.RecordNumber">
          <el-table-column prop="num">
            <template #header>
              <el-input
                v-if="showFilterRow"
                v-model="filterForm.num"
                @keyup.enter.native="onQuery"
              ></el-input>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column :label="dataList.DeviceNumber">
          <el-table-column prop="deviceNum">
            <template #header>
              <el-input
                v-if="showFilterRow"
                v-model="filterForm.deviceNum"
                @keyup.enter.native="onQuery"
              ></el-input>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          :label="
            $i18n.locale === 'en' ? dataList.DeviceEName : dataList.DeviceName
          "
        >
          <el-table-column prop="deviceName">
            <template #header>
              <el-input
                v-if="showFilterRow"
                v-model="filterForm.deviceName"
                @keyup.enter.native="onQuery"
              ></el-input>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column :label="dataList.SourceNumber">
          <el-table-column prop="borrowNum">
            <template #header>
              <el-input
                v-if="showFilterRow"
                v-model="filterForm.borrowNum"
                @keyup.enter.native="onQuery"
              ></el-input>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column :label="dataList.DeviceBorrowTime">
          <el-table-column>
            <template slot-scope="scope">
              <span>{{
                formatTime(scope.row.actualBorrowTime) +
                "~" +
                formatTime(scope.row.actualReturnDate)
              }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column :label="dataList.DeviceBorrower">
          <el-table-column prop="borrowPerson">
            <template #header>
              <el-input
                v-if="showFilterRow"
                v-model="filterForm.borrowPerson"
                @keyup.enter.native="onQuery"
              ></el-input>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column :label="dataList.CreateTime">
          <el-table-column prop="createTime">
            <template #header>
              <el-date-picker
                v-model="filterForm.createTimeList"
                type="datetimerange"
                :range-separator="dataList.To"
                :start-placeholder="dataList.StartDate"
                :end-placeholder="dataList.EndDate"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column :label="dataList.Operation">
          <el-table-column width="140">
            <template #header>
              <div v-if="showFilterRow" class="search-operate">
                <el-link type="primary" @click="onQuery">{{
                  btn.Query
                }}</el-link>
                <el-link @click="cancelForm">{{ btn.Reset }}</el-link>
              </div>
            </template>
            <template slot-scope="scope">
              <div class="base-table-operation">
                <el-link
                  v-rights="'preview'"
                  type="primary"
                  @click="preview(scope.row)"
                  >{{ btn.Preview }}</el-link
                >
              </div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <BasePagination
        :total="pagination.total"
        :page-index="pagination.pageIndex"
        :page-size="pagination.pageSize"
        @sizeChange="sizeChange"
        @changePage="currentChange"
      />
    </div>
    <BasePreviewFile
      v-if="previewFileShow"
      :preview-file-show.sync="previewFileShow"
      :preview-file="filepreview"
    />
  </div>
</template>
<script>
import { getList } from "../../api/DeviceBorrowRecord";
import { formatTime } from "../../utils/time";
import { WordToImage, GetStaticFileInfo } from "@/api/Base";
export default {
  name: "DeviceBorrowRecordList",
  components: {},
  data() {
    return {
      formatTime,
      loading: false,
      showFilterRow: false,
      previewFileShow: false,
      tableData: [],
      tableDatas: [],
      filepreview: {
        storageFileName: "",
        url: "",
      },
      filterForm: {
        num: "",
        deviceNum: "",
        deviceName: "",
        borrowNum: "",
        borrowPerson: "",
        createTimeList: [],
        departId: sessionStorage.getItem("currentDepartmentId"),
      },
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  computed: {
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
    dataList() {
      return this.$t("ModuleDevice.Device");
    },
  },
  created() {
    this.getList();
  },
  methods: {
    preview(row) {
      this.loading = true;
      this.toImage(row.filePath);
    },

    toImage(data) {
      this.filepreview = {};
      this.filepreview.storageFileName = "";
      this.filepreview.url = "";
      this.filepreview.fileName =
        this.$t("ModuleDevice.Device.DeviceBorrowRecord") + ".docx"; // 文件名称（包括后缀名）storageFileName
      this.filepreview.storageFileName =
        this.$t("ModuleDevice.Device.DeviceBorrowRecord") + ".docx";
      this.filepreview.urlList = null;
      this.filepreview.type = "";

      WordToImage({ filePath: data })
        .then((res1) => {
          this.filepreview.urlList = res1.data;
          this.filepreview.type = "img";
          this.loading = false;
          this.previewFileShow = true;
          this.closedDialog();
        })
        .catch(() => {
          this.loading = false;
        });
    },
    onQuery() {
      if (
        this.filterForm.createTimeList !== null &&
        this.filterForm.createTimeList.length !== 0
      ) {
        this.filterForm.createTimeStart =
          this.filterForm.createTimeList[0] + " 00:00:00";
        this.filterForm.createTimeEnd =
          this.filterForm.createTimeList[1] + " 23:59:59";
      }

      this.pagination.pageIndex = 1;
      this.getList("filter");
    },
    getList(flag) {
      if (flag) {
        this.pagination.pageIndex = 1;
      }
      // this.filterForm.departId =  sessionStorage.getItem("currentDepartmentId");
      getList(this.filterForm, this.pagination).then((res) => {
        this.tableData = res.data.dataList;
        this.pagination.total = res.data.total;
      });
    },
    filterIconClick() {
      this.showFilterRow = !this.showFilterRow;
      !this.showFilterRow && this.cancelForm();
    },
    // 清空筛选条件
    cancelForm() {
      this.filterForm = this.$options.data().filterForm;
      this.pagination.pageIndex = 1;
      this.getList("filter");
    },
    // 导出
    exportData() {
      this.tableDatas.forEach((element) => {
        GetStaticFileInfo(
          element.filePath,
          element.num +
            this.$t("ModuleDevice.Device.DeviceBorrowRecord") +
            ".docx"
        );
      });
    },
    handleSelectionChange(val) {
      this.tableDatas = val;
    },
    // 切换页码
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
      this.getList();
    },
    currentChange(val) {
      this.pagination.pageIndex = val;
      this.getList();
    },
  },
};
</script>
